<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="流程名称">
        <el-input v-model="queryParams.processName" size="small" style="width: 240px" placeholder="请输入流程名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="标识">
        <el-input v-model="queryParams.key" size="small" style="width: 240px" placeholder="请输入标识" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDeploy">部署流程文件</el-button>
      </el-col>
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="流程ID" align="center" prop="id" show-overflow-tooltip />
      <el-table-column label="部署ID" align="center" prop="deploymentId" show-overflow-tooltip />
      <el-table-column label="流程名称" align="center" prop="name" show-overflow-tooltip />
      <el-table-column label="标识" align="center" prop="key" show-overflow-tooltip />
      <el-table-column prop="resourceName" label="XML" header-align="center" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <a @click="handleDownloadResource(scope.row.deploymentId, scope.row.resourceName)">{{ scope.row.resourceName }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="diagramResourceName" label="图片" header-align="center" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <a @click="handleDownloadResource(scope.row.deploymentId, scope.row.diagramResourceName)">{{ scope.row.diagramResourceName }}</a>
        </template>
      </el-table-column>
      <el-table-column label="版本" align="center" prop="version" show-overflow-tooltip />
      <el-table-column label="部署时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deploymentTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.suspended" size="mini" type="text" icon="el-icon-edit" @click="handleActive(scope.row.id)">激活</el-button>
          <el-button v-else size="mini" type="text" icon="el-icon-edit" @click="handleSuspend(scope.row.id)">挂起</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleConvertToModel(scope.row.id)">转换为模型</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row.deploymentId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 部署流程文件对话框 -->
    <el-dialog :title="deployDialog.title" :visible.sync="deployDialog.visible" :close-on-click-modal="false" width="500px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        :headers="deployData.headers"
        :action="deployData.url"
        :disabled="deployData.isUploading"
        :file-list="deployData.fileList"
        :before-upload="handleBeforeUpload"
        :on-progress="handleUploadProgress"
        :on-success="handleUploadSuccess"
        class="text-center"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text" v-html="'将文件拖到此处，或<em>点击上传</em>'" />
        <div slot="tip" class="el-upload__tip">只支持zip、xml、bar、bpmn格式文件！</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import ProcessApi from '@/api/activiti/ProcessApi'
import AuthUtils from '@/utils/AuthUtils'

const defaultDeployData = {
  headers: { Authorization: 'Bearer ' + AuthUtils.getToken() }, // 上传请求头
  url: process.env.VUE_APP_BASE_API + '/activiti/process/deployByFile', // 上传的地址
  isUploading: false, // 是否禁用上传
  fileList: []
}
export default {
  components: {
  },
  data() {
    return {
      options: {
      },
      queryParams: {
        processName: null,
        key: null
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      deployDialog: {
        title: '',
        visible: false
      },
      deployData: Object.assign({}, defaultDeployData),
      dateRange: [],
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    // 部署流程文件
    handleDeploy() {
      this.openDeployDialog()
    },
    // 激活
    handleActive(id) {
      this.$confirm('确定进行激活操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProcessApi.active(id)
      }).then(() => {
        this.handleQuery()
        this.$message.success('激活成功')
      })
    },
    // 挂起
    handleSuspend(id) {
      this.$confirm('确定进行挂起操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProcessApi.suspend(id)
      }).then(() => {
        this.handleQuery()
        this.$message.success('挂起成功')
      })
    },
    // 转换为模型
    handleConvertToModel(id) {
      this.$confirm('确定进行转换为模型操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ProcessApi.convertToModel(id)
      }).then(() => {
        this.handleQuery()
        this.$message.success('转换为模型成功')
      })
    },
    handleRemove(deploymentId) {
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return ProcessApi.remove(deploymentId)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleQuery() {
      this.loading = true
      ProcessApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    // 下载流程资源(xml/image)
    handleDownloadResource(deploymentId, resourceName) {
      ProcessApi.downloadResource({ deploymentId, resourceName }).then(response => {
        this.$common.download(response.data)
      })
    },
    openDeployDialog() {
      this.resetDeployDialog()
      this.deployDialog.visible = true
    },
    resetDeployDialog() {
      this.deployDialog = {
        title: '',
        visible: false
      }
      this.deployData = Object.assign({}, defaultDeployData)
    },
    // 文件上传前校验文件格式
    handleBeforeUpload(file) {
      if (!/.+\.zip$/.test(file.name) && !/.+\.xml$/.test(file.name) && !/.+\.bar$/.test(file.name) && !/.+\.bpmn$/.test(file.name)) {
        this.$message.error('只支持zip、xml、bar、bpmn格式文件！')
        return false
      }
    },
    // 文件上传中禁用上传
    handleUploadProgress(event, file, fileList) {
      this.deployData.isUploading = true
    },
    // 文件上传成功清空文件
    handleUploadSuccess(response, file, fileList) {
      this.deployDialog.visible = false
      this.deployData.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.data ? response.data : response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.handleQuery()
    },
    resetQuery() {
      this.page.current = 1
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    }
  }
}
</script>
